<template>
  <div class="table-data-view warpper">
    <div class="breadcrumb-view">
      <div class="breadcrumb-title">{{ $t($route.meta.title) }}</div>
    </div>
    <div class="card-box">
      <el-card>
        <div class="title">核心能力服务(共 {{ coreNum }} 家)</div>
        <table-list style="height: 264px" v-loading="isTbLoading" ref="tableView" class="table-list-view" :tableConfig="coreTableConfig" :tableData="coreTableData"></table-list>
      </el-card>
      <el-card>
        <div class="title">产品统计</div>
        <div class="conten-box">
          <div>
            <p>集团产品总数</p>
            <p>
              <span>{{ productCount }}</span
              >个
            </p>
          </div>
          <div>
            <p>集团本部产品总数</p>
            <p>
              <span>{{ headCompanyCount }}</span
              >个
            </p>
          </div>
          <div>
            <p>集团子公司产品总数</p>
            <p>
              <span>{{ subCompanyCount }}</span
              >个
            </p>
          </div>
        </div>
        <div class="title">产品概况</div>
        <!-- 统计图区域 -->
        <div class="echarts-box">
          <div>
            <echarts :echartsData="standardProduct" :title="standardProductTitle" :echartsid="standardId"></echarts>
          </div>
          <div>
            <echarts :echartsData="solution" :title="solutionTitle" :echartsid="solutionId"></echarts>
          </div>
          <div>
            <echarts :echartsData="operateProduct" :title="standardProductTitle" :echartsid="operateProductId"> </echarts>
          </div>
        </div>
        <!-- 各公司产品对比占比 -->
        <div class="title">各公司产品占比</div>
        <div style="border: #e4e7ed solid 1px; margin-top: 12px">
          <el-table :data="productCountByDeptList" style="width: 100%">
            <el-table-column prop="deptName" label="公司名称" min-width="40"></el-table-column>
            <el-table-column prop="count" label="产品数量" min-width="20"></el-table-column>
            <el-table-column label="产品数量占比">
              <template slot-scope="scope">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.proportion" :format="format"> </el-progress>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getGroupInfo } from '@/api/groupirectoryApi.js'

export default {
  data() {
    return {
      standardId: 'standardId',
      solutionId: 'solutionId',
      operateProductId: 'operateProductId',
      solutionid: 'solutionid',
      isTbLoading: true,
      coreTableConfig: {},
      coreTableData: [],
      coreNum: 0,
      productCount: 0, //集团产品总数
      headCompanyCount: 0, //集团本部产品总数
      subCompanyCount: 0, //集团子公司产品总数
      standardProduct: [], //标准化产品化统计图数据
      solution: [], //应用解决方案统计图数据
      operateProduct: [], //运营平台产品统计图数据
      standardProductTitle: '',
      solutionTitle: '',
      operateProductTitle: '',
      productCountByDeptList: [], //各公司产品占比数据
    }
  },
  components: {
    tableList: () => import('@/components/common_tables.vue'),
    echarts: () => import('@/components/echarts.vue'),
  },
  created() {
    this.coreTableConfig = {
      isSohwIndex: true,
      props: [
        {
          type: 'text',
          label: '公司名称',
          prop: 'deptName',
        },
        {
          type: 'text',
          label: '能力或服务名称',
          prop: 'name',
        },
        {
          type: 'text',
          label: '应用领域',
          prop: 'applicationField',
        },
        {
          type: 'text',
          label: '负责人',
          prop: 'head',
        },
        {
          type: 'text',
          label: '联系电话',
          prop: 'phone',
        },
      ],
      isOpt: true,
      optBtns: [
        {
          label: '查看',
          callback: 'lookUp',
          code: 'mgr_edit',
        },
      ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getGroupirectory()
    })
  },
  methods: {
    getGroupirectory() {
      this.isTbLoading = true
      getGroupInfo().then((res) => {
        if (res.data.code !== 200) return this.$message.error('获取信息失败')
        this.coreTableData = res.data.data.productListOfCoreCompetence
        this.productCountByDeptList = res.data.data.productCountByDeptList
        this.productCountByDeptList.map((v) => {
          this.$set(v, 'proportion', v.proportion * 100)
          return v
        })
        this.coreNum = this.coreTableData.length
        this.productCount = res.data.data.productCount
        this.headCompanyCount = res.data.data.headOrSubCount.headCompanyCount
        this.subCompanyCount = res.data.data.headOrSubCount.subCompanyCount

        let echartsArr = res.data.data.categoryAndHeadOrSubList
        echartsArr.forEach((el) => {
          if (el.category == '标准化产品') {
            this.standardNum = el.subCount + el.headCount
            this.standardProductTitle = el.category
            this.standardProduct.push({
              value: el.subCount,
              name: '集团子公司',
            })
            this.standardProduct.push({
              value: el.headCount,
              name: '集团总公司',
            })
          } else if (el.category == '应用解决方案') {
            this.solutionTitle = el.category
            this.solution.push({
              value: el.subCount,
              name: '集团子公司',
            })
            this.solution.push({
              value: el.headCount,
              name: '集团总公司',
            })
          } else {
            this.operateProductTitle = el.category
            this.operateProduct.push({
              value: el.subCount,
              name: '集团子公司',
            })
            this.operateProduct.push({
              value: el.headCount,
              name: '集团总公司',
            })
          }
        })
      })
      setTimeout(() => (this.isTbLoading = false), 500)
    },
    getViewEcharts() {
      let myChar1 = this.$echarts.init(chartDom1)
      let option1 = {
        title: {
          left: '36%',
          text: '标准化商品' + this.standardNum,
          textStyle: {
            color: '#333333',
            fontFamily: 'Microsoft YaHei',
            fontSize: 18,
            lineHeight: 26,
            // fontWeight: "normal",
          },
          x: 'center',
          y: 'center',
        },
        // 鼠标经过显示数据
        tooltip: {
          trigger: 'item',
          formatter: '集团本部 {c} ({d}%)',
        },
        //标签文本
        label: {
          color: '#666666',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 16,
          formatter: '{b} {d}%',
        },
        // 图例设置
        legend: {
          orient: 'vertical',
          left: '0%',
          top: '15%',
          textStyle: {
            fontSize: '14px',
            fontWeight: 400,
            color: '#000000',
          },
          show: false,
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.standardProduct,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      option1 && myChar1.setOption(option1)
    },
    format(val) {
      let strval = val + ''
      console.log(strval.charAt(5), 'jdt')
      return strval.charAt(5) ? strval.substring(0, 5) + '%' : val + '%'
    },
  },
}
</script>

<style lang="scss" scoped>
.warpper {
  background: #f5f6f7;
}

.breadcrumb-view {
  border-bottom: #fff solid 1px;
}

.card-box {
  margin-top: 10px;

  .el-card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
  }
}

.title {
  font-size: 18px;
  font-weight: 540;
}

.conten-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;

  div {
    width: 32%;
    height: 140px;
    margin-top: 10px;
    background-image: -webkit-linear-gradient(180deg, rgb(84, 159, 243) 0%, rgb(46, 129, 222) 100%);
    border-radius: 6px;
    p {
      margin-left: 50px;
      color: white;
      font-size: 20px;
      font-weight: 600;
      line-height: 130%;

      span {
        font-size: 48px;
      }
    }
  }
}

.echarts-box {
  width: 100%;
  height: 370px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  div {
    width: 33%;
    height: 370px;
  }
}
</style>
